@import '/VUD/Style Library/Adres/Styles/less/vars.less';

/*-----Miga de pan-----*/

#breadcrumbGeneral .breadcrumb.breadcrumb-interna {
    font-family: @opens;
    border-bottom: 1px solid #C1C1C1;
	font-size: 14px;
    background: transparent;
    border-radius: 0;
	width: 100%;
}

#breadcrumbGeneral .breadcrumb.breadcrumb-interna span span:nth-child(2) a {
	padding-left: 22px;
    position: relative;


	&::before {
	content: "\e9bc";
    font-family: 'entypo' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 17px;
    color: #C1C1C1;
    z-index: 1;
	}
}

#breadcrumbGeneral .breadcrumb.breadcrumb-interna span span {
	color: #273656;
    font-family: 'Open Sans';
    font-weight: 500;
    margin-right: 5px;
	font-size: 14px;
	
	a {
		color: #C1C1C1;
		font-family: 'Open Sans';
		font-size: 14px;
		font-weight: 300;
	}
}
/*-----/Miga de pan-----*/

/* Página Formulario de reclamación de indemnización */
.ms-fullscreenmode #contentBox {
    margin-left: 0px !important;
}

.tramite{
	padding-top: 29px;
	color: @black;
	b, strong {
    	font-weight: 700 !important;
	}
	p{
		font: normal 18px @opens !important;
		margin-top: 10px;
    	margin-bottom: 1rem;
	}
	a{
		color: @green;
	}
	h3{
		font: normal 600 20px @monserat !important;
	}
	h2{
		font: normal 600 24px @monserat !important;
	}
	
	blockquote {
    	margin-left: 30px !important;
	}
}


.tramites{
	.item-tra-exce{
		.row{
			margin-top: 30px;
			.col-2{
				padding-right: 0;
			}
			svg{
				font-size: 30px;
    			color: #fff;
			}
		}
	}
}


/* Titulo principal*/
.title-tramites{
	text-align: left;
	color: @blue;
	font: normal normal 600 32px/38px @monserat !important;
}
/* Descripciones laterales*/
ul.tramites-descrip li.dfwp-item{

	    background-color: @green;
	    border-radius: 3px;
		color: @white;
		padding: 25px 25px 25px 25px;
		
		 	.descrip-tramite1, descrip-tramite2{
				text-align: left;
				opacity: 1;
			}
		
			.descrip-tramite1{
				font: bold 20px @monserat !important;
			}
}

ul.tramites-descrip li.dfwp-item:last-child{
    background-color: @blue;
    border-radius: 3px;
	color: @white;
    margin-top: 30px;
    padding: 25px 25px 25px 25px;
}
/* Contenido principal*/

/* Parrafo Contenido principal*/

h3 span.ms-rteStyle-Accent2{
	color: @white !important;
	background-color: @green;
 	border-radius: 16px;
    font-size: 20px !important;
    padding: 2px 10px 2px 10px;
    margin-right: -22px;
}
/* Botón - Contenido principal*/
.tramite-btn{
	justify-content: center;
	display: flex;
	margin: 40px 0px;

	.btn-tramite:hover{
		background: @hoverdark;
		opacity: 1;
		color: @white;
	}

	.btn-tramite{
		border-radius: 6pt;
		text-align: center;
		font: normal 600 16px @opens !important;
		letter-spacing: 0px;
		color: @white;
		text-transform: uppercase;
		opacity: 1;
		background-color: @blue;
		justify-content: center;
		display: flex;
		width: 292px;
		border-color: @blue;
	}
}
/* Fin Página Formulario de reclamación de indemnización */

/* Contraste Activado */
.contrast-active{

	a::before,li::before {
	    filter: brightness(7.5) !important;
    }
    
    .vud .tramites .item-tramite .conte-trami .col-6 .a {
    	fill: white;
	}

	background-color: black !important;
	color: white !important;
	::-webkit-input-placeholder { color: #fff; } 

:-moz-placeholder { /* Firefox 18- */ color: #fff; } 

::-moz-placeholder { /* Firefox 19+ */ color: #fff; } 

:-ms-input-placeholder { color: #fff; }
	
}
.item-tramite .conte-trami .contrast-active .col-6:first-child {
    border-right: 1px solid white !important;
}

#access-bar.contrast-active{

 	a#aumentar, a#reducir{
		background-color: transparent !important;
	}
}

.header-logo.nopadding div.contrast-active:first-child img {
    /*filter: contrast(25%);*/
     filter: brightness(3);
}

.container.data-image.slider-descargar.contrast-active{
	background-color: transparent !important;
}

.col-sm-12.contrast-active{
	background-color: transparent !important;
}

.vud .tramites .item-tra-exce.contrast-active{
	border: 1px solid #fff;
}

/*Cristian Maldonado*/
.steps .step-item.active.contrast-active::before{
	background: #fff;
}

.steps .step-item.contrast-active::before{
	background: #838794;
}

.steps .step-item:last-child.contrast-active::after{
	background: #838794;
}

.steps .step-item button.contrast-active{
	background: #000!important;
    border: 2px solid #fff!important; 
}

.custom-control-label.contrast-active::before{
	background-color: #000!important;
    border: #ffffff solid 1px!important;
}

#step-1 button.btn.contrast-active{
	border-color: #fff;
}

#step-2 button.btn.contrast-active{
	border-color: #fff;
}

#step-3 button.btn.contrast-active{
	border-color: #fff;
}

#step-4 button.btn.contrast-active{
	border-color: #fff;
}

#step-2 button.btn.btn-prev.contrast-active{
	border-color: #fff!important;
	color: #fff!important;
}

.icon.enty-help.contrast-active{
	background: #000!important; 
	border: 1px solid #fff!important;
}

.welcome .conten-page .disform .conte-disform .flot a.contrast-active{
	border: 1px solid #fff;
}

.modal-content.term.contrast-active{
	border: 1px solid #fff;
}

.modal-content.term button.btn.contrast-active{
	border: 1px solid #fff;
}

.select2-results__option.contrast-active{
	background-color: red!important;
}

/* Contraste Activado */


/*****************Login******************/
.login{
	.page-title{
		visibility: hidden;
	}

	 h1{
	    text-align: left;
		font: normal normal 600 20px/20px @monserat;
		color: @azuldark;
    }
    
     a{
		text-align: left;
		font: normal normal normal 16px/22px @opens;
		color: @green;
	}
	
	.wrapper{

	    padding: 31px;
	    box-shadow: 0px 2px 4px #0000002E;
	    border-radius: 6px;
	
		.login-footer {
		    align-self: baseline;
		    text-align: left;
	
		}    
	    .login-data{
	    	background: @gray 0% 0% no-repeat padding-box;
		    border-radius: 6px;
		
		    	    
		    button{
			    text-align: center;
			    font: normal normal 600 16px/22px @opens;
			    color: @white;
			    text-transform: uppercase;
			    background: @blue 0% 0% no-repeat padding-box;
			    border-radius: 6px;
			    width: 110px;
			   	margin-left: -16px;	      
			}
			
			button:hover{
				background: @hoverdark 0% 0% no-repeat padding-box;
				border-radius: 6px;
			}
		    
		    div{
		    	margin-bottom: 13px;
    			padding: 5px 4px 0px 12px;
		    
		   		.row.registro{
				    padding: 0px 0px 0px 12px;
		    	}
		    
		    }
		    
			 input{
			    background: @white 0% 0% no-repeat padding-box;
			    border: 1px solid @black;
			    border-radius: 6px;
			    width: 90%;	       
	    	}
	    	
	    	label{
	    		text-align: left;
				font: normal normal normal 18px/24px @opens;
				color: @black;
	    	}
	    }	
	}


	.wrapper-primera{
		display: none;
	    margin-left: 40px;
	    background: @gray 0% 0% no-repeat padding-box;
	    box-shadow: 0px 2px 4px #0000001F;
	    border-radius: 6px;
	    opacity: 1;
	    padding: 23px;	  
	    p{
	    	text-align: left;
			font: normal normal normal 18px/28px @opens;
			
	    }
	    
	    button{
			text-align: center;
			font: normal normal 600 16px/22px @opens;
			letter-spacing: 0px;
			color: @white;
			text-transform: uppercase;
			opacity: 1;
			width: 100%;
			background: @blue 0% 0% no-repeat padding-box;   
			border-radius: 6px; 
		}
	    
	    button:hover{
			background: @hoverdark 0% 0% no-repeat padding-box;
			border-radius: 6px;
		}
		
		.footer2{
			margin-top: 35%;
		}
	}
}

		
/*****************            Formularios    ******************/

/*---Botón cerrar modal primera vez---*/
#cerrar {
	position: relative;
	left: 39rem;
	padding: 0 !important;
	margin: 0 !important;

	&:focus {
		outline: none !important;
	}
}
/*---Botón cerrar modal primera vez---*/

/*---Botón cerrar modal reposición---*/
#Cerrar-reposicion {
	position: relative;
	left: 57rem;
	
	&:focus {
		outline: none !important;
	}
}
/*---Botón cerrar modal reposición---*/

.modal-content.term,.modal-body.term{

	font: normal normal 600 18px/28px @opens;

	 p,li{
	    margin-top: 1rem;
	    margin-bottom: 1rem;
	}
	
	#tabla{
		text-align: center; 
	}

}

.modal-content.term{
    padding: 0px 70px 50px 70px;
    
    ul {
  		list-style: none;
  		
			 li::before {
				content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
				color: @blue; 
				width: 2.5em; /* Also needed for space (tweak if needed) */
				display: inline-block; /* Needed to add space between the bullet and the text */
				list-style-type: inherit; 
				margin: -24px !important;
			}
	}
    
   

    button.btn:hover{
		background: @hoverdark;
		opacity: 1;
		color: @white;
	}
	
	input[type=button][disabled],button[disabled][disabled] {
	    border-color: @gray;
	    background-color: @gray;
		color: #b1b1b1;
		left: auto;
	}
	
	button.btn{
		border-radius: 6pt;
		font: normal 600 16px @opens !important;
		color: @white;
		text-transform: uppercase;
		background-color: @blue;
		border-color: @blue;
		
	}
	
	.check{
	    display: block;
	}
	.acepto-btn{
    	text-align: center; 
    }  
     
    a{
		text-align: left;
		font: normal normal normal 18px/28px @opens;
		color: @green;
	}
	
	div.modal-body.term div,.modal-title.term {
		color: @blue !important;
		font: normal normal 600 24px/28px @monserat;		
	} 
	
	div.modal-title.term{
		font: normal normal 600 32px @monserat;
	}
	
	.modal-header.term, .modal-footer{
		border-bottom: none;
		border-top: none;
		margin-right: auto;
	}  
}

.icon.enty-help {
    font-family: 'entypo' !important;
    border-radius: 50%;
    color: white;
    background: @green;
    font-size: 10px;
    margin-left: 6px;
    padding: 5px 5px 5px 5px;
    font-style: normal;
    line-height: 1;
    vertical-align: text-top;
    
}
    
    .btn-prev{
    	color: @blue !important;
		background-color: @transparent !important;
		border-radius: 6pt;
		font: normal 600 16px @opens !important;
		text-transform: uppercase;
		border-color: @blue;

    }
    
#step-1,#step-2,#step-3,#step-4{

	button.btn.btn-prev,.btn-prev, {
		color: @blue !important;
		background-color: @transparent !important;
		border-radius: 6pt;
		font: normal 600 16px @opens !important;
		text-transform: uppercase;
		border-color: @blue;
	}	
	button.btn-prev:hover{
		color: @white !important;
		background-color: @blue !important;
	}
	
	button.btn:hover{
		background: @hoverdark;
		opacity: 1;
		color: @white;
	}

	button.btn{
		border-radius: 6pt;
		font: normal 600 16px @opens !important;
		color: @white;
		text-transform: uppercase;
		background-color: @blue;
		border-color: @blue;
		
	}
}



.tramite{
	.accordion{
	
	#collapser-2 div li::before,#collapser-3 div li::before,a::before{
		 content: url("/VUD/Style Library/Adres/Image/ico-simboloADRES.svg");
   		 margin-right: 10px;
	}
	
	ul li div div,div#collapser-1.collapse.show,div#collapser-2.collapse.show,div#collapser-3.collapse.show{
	    background: #F5F5F5;
	    padding: 10px 10px 10px 0px;
	}
	
	
	
    .collapse-init{
    	width: 104%;
        li{
            margin-top: 15px;
          

        }
        .iner{
            &[aria-expanded="true"]{
                h3, h2{
                    color: @green;
                    &::after{
                        transform: rotate(180deg);
                        // border: none;
                        // border-top: 3px solid #4E67B4;
                        // bottom: auto;
                        // padding-top: 25px;
					}
					&::before{
						background: @green;
						transform: rotate(180deg);
					}
                }
            }
            h3, h2{
                text-align: left;
                color: @blue;
                font-size: 20px !important;
                font-family: @monserat;
                font-weight: 600;
                position: relative;
                border-bottom: 1px solid #C1C1C1;
                cursor: pointer;
                transition: 1s all;
                padding-bottom: 22px;
				margin-bottom: 0;
				padding-right: 30px;
                &::after{
                    content: "\e93c";
                    font-family: 'entypo' !important;
                    speak: never;
                    font-style: normal;
                    font-weight: normal;
                    font-variant: normal;
                    text-transform: none;
                    line-height: 1;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    position: absolute;
                    right: 0;
                    // border-bottom: 3px solid #4E67B4;
                    // font-size: 20px;
                    // bottom: 0;
                    transition: 1s all;
                    top: 0;
				}
				&::before{
					content: "";
					position: absolute;
					width: 18px;
					height: 3px;
					bottom: 0;
					background: @blue;
					right: 0;
					transition: 1s all;
				}
            }
            
        }
        .collapse-body{
            line-height: 20px;
        }
    }
}
}
.welcome{
	.conten-page{
		.disform{
			background: #F9F9F9;
			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.122);
			.col-12.col-lg-4:first-child{
				.conte-disform{
					position: relative;
					&::after{
						content: "";
						width: 1px;
						background: #C1C1C1;
						position: absolute;
						right: 0;
						top: 10%;
						height: 80%;
					}
				}
			}
			.col-12.col-lg-4:nth-child(2){
				.conte-disform{
					position: relative;
					&::after{
						content: "";
						width: 1px;
						background: #C1C1C1;
						position: absolute;
						right: 0;
						top: 10%;
						height: 80%;
					}
				}
			}
			.conte-disform{
				text-align: center;
				padding: 20px;
				height: 100%;
				h3{
					font: normal normal bold 24px/38px Montserrat;
					color: @blue;
				}
				div{
					font: normal normal 600 18px/28px Open Sans;
					color: #4B4B4B;
					margin-bottom: 100px
				}
				p{
					margin: 0;
				}
				.flot{
					margin: 0;
					width: 100%;
					left: 0;
					position: absolute;
					bottom: 10%;

					a{
						
						font: normal normal 600 16px/22px Open Sans;
						color: #FFFFFF;
						text-transform: uppercase;
						background: #4E67B4;
						transition: 0.5s all;
						padding: 6px 20px;
						border-radius: 6px;
						&:hover{
							background: @hoverdark;
						}
					}
				}
			
			}
		}
	}
}

.layot-12{
	.conten-page{
		background: #F9F9F9;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.122);
		padding: 45px;
	}
}

.table-responsive{
	margin-top: 30px;
	table{
		thead{
			background: #EFF2FF;
			th{
				font: normal normal 600 16px Montserrat;
				color: @blue;
			}
		}
		tbody{
			td{
				font: normal normal normal 16px Open Sans;
				color: #4B4B4B;
				&:last-child{
					color: @green;
				}
			}
		}
	}
}


@media only screen and (max-width: 768px){
	ul.tramites-descrip {
	    margin-top: 25%;
	}
	
	div#myModal {
	   width: 80%;
	    height: 100%;
	    margin: 10px 75px;
    }
	
	.modal-header {
    	padding: 1rem 0rem;
	}

	.modal-body {
	    padding: 0rem;
	}

	.modal-content.term {
	    padding: 10px 25px 10px 25px;
	}
	
	.text-right,.form-group {
	    text-align: center;
	}
	
	
}

@media only screen and (max-width: 576px){

	div#myModal {
	    width: 100%;
	    height: 100%;
	    margin: 10px;
	}
}
#boton-ir-arriba {
	border-radius: 50%;
	background-color: #79e9e8;
	opacity: 0.5;
	position: fixed;
	bottom: 35px;
	right: 40px;
	z-index: 1;
	&:hover {
	background-color: #79e9e8;
	opacity:1;
	}
	i {
		border-style: none;
		display: block;
		margin: 0.6rem		
	}
}
#page{
	margin-left: 0 !important;
}
.login-user{
	.title-page{
		display: none;
	}
}


/*Iframe Entidades territoriales*/

div#WebPartWPQ9{
	 iframe{
		width: 100%;
		    margin: 0% 0% 0% 15%!important;
	}
}

.info{
	a{
	 	color:#009C9A;
	}
		
		iframe{
			/*margin: 4% 30%;*/	
			width: 100%;
		}

	

}


/*Botones*/
#step-1 button.btn, #step-2 button.btn, #step-3 button.btn, #step-4 button.btn,.tramite-btn .btn-tramite{
	text-decoration: none;
}

.custom-file-label::after{
	content: "Subir Archivo" !important;
}

section.imag-menu{
	.image-page{
		img{
			width: 100% !important;
		}
	}
}